<template>
	<view class="withdraw-record-viewport">
		<view class="banner-wrapper">
			<view class="place-holder-top">
				<view class="filter-wrapper" @tap="openCalendar">
					{{startDateStr}}--{{endDateStr}}
					<tui-icon name="turningdown" :size="23" color="#FFF"></tui-icon>
				</view>
			</view>
			<view class="place-holder-bottom"></view>
		</view>
		<view class="total-amount">
			<view class="price">
				{{total}}
			</view>
			<view class="title">
				<view class="title-flag"></view>
				<view class="title-txt">
					合计提现(元)
				</view>
			</view>
		</view>
		<view class="placeholder"></view>
		<view class="record-container">
			<tui-list-cell padding="0" :lineLeft="false" :arrow="false" v-for="item in listData" :key="item.id">
				<view class="record-item">
					<view class="amount-wrapper">
						<view class="title">
							提现金额
						</view>
						<view class="amount">
							{{item.occurBala}}
						</view>
					</view>
					<view class="right-wrapper">
						<view class="date-wrapper">
							<view class="title middle-title">
								提现日期
							</view>
							<view class="date">
								{{item.occurDate | dateFilter}} {{item.occurTime | timeFilter}}
							</view>
						</view>
						<view class="status-wrapper">
							{{item.status === 1 ? '已提现' : '处理中'}}
						</view>
					</view>
				</view>
			</tui-list-cell>
			<cw-load-more :status="moreStatus"></cw-load-more>
		</view>
		<uni-calendar
			ref="refCalendar"
			:range="true"
			:insert="false"
			@confirm="dateChange"
		/>
	</view>
</template>

<script>
	import dayjs from '@/utils/dayjs.js'
	import { LoadMore } from '@/constants'
	import CwLoadMore from '@/components/common/cw-load-more/cw-load-more.vue'
	export default {
		components: {
			CwLoadMore
		},
		data() {
			return {
				startDate: dayjs().date(1).format(),
				endDate: dayjs().date(dayjs().daysInMonth()).format(),
				total: '0.00',
				listData: [],
				moreStatus: LoadMore.noop
			};
		},
		computed: {
			startDateStr() {
				return dayjs(this.startDate).format('YYYY.MM.DD')
			},
			endDateStr() {
				return dayjs(this.endDate).format('YYYY.MM.DD')
			}
		},
		filters: {
			dateFilter (val) {
				if (val.length !== 8) {
					return val
				} else {
					return `${val.substr(0, 4)}-${val.substr(4, 2)}-${val.substr(6, 2)}`
				}
			},
			timeFilter (val) {
				if (val.length !== 6) {
					return val
				} else {
					return `${val.substr(0, 2)}:${val.substr(2,2)}:${val.substr(4,2)}`
				}
			}
		},
		mounted() {
			this.datas = {
				pagination: {
					pageNum: 1,
					pageSize: 10
				}
			}
			uni.showLoading()
			this.getWithdrawRecords()
		},
		methods: {
			async getWithdrawRecords() {
				const { pagination: { pageNum, pageSize } = {} } = this.datas
				const params = {
					startDate: dayjs(this.startDate).format('YYYYMMDD'),
					endDate: dayjs(this.endDate).format('YYYYMMDD'),
					type: 1,
					merchantId: this.$store.state.merchantId,
					pageNum,
					pageSize
				}
				const { success, data } = await this.$api.getCurrents(params)
				if (success) {
					this.total = data.totalOccurBala.toFixed(2)
					if (pageNum === 1) {
						this.listData = data.accountCurrentDTOs || []
						if (this.listData.length < pageSize) {
							this.moreStatus = LoadMore.nomore
						}
					} else {
						if (data.accountCurrentDTOs && data.accountCurrentDTOs.length) {
							this.listData = this.listData.concat(data.accountCurrentDTOs)
						} else {
							this.moreStatus = LoadMore.nomore
						}
					}
				}
				uni.hideLoading()
			},
			dateChange(opt) {
				const { range: { before, after } = {} } = opt
				if (before && after) {
					this.datas.pagination.pageNum = 1
					this.startDate = before
					this.endDate = after
					this.getWithdrawRecords()
				}
			},
			openCalendar() {
				this.$refs.refCalendar && this.$refs.refCalendar.open();
			}
		},
		onReachBottom() {
			if (![LoadMore.nomore, LoadMore.loading].includes(this.moreStatus)) {
				this.moreStatus = LoadMore.loading
				this.datas.pagination.pageNum++
				this.getWithdrawRecords()
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.withdraw-record-viewport {
	.banner-wrapper {
		.place-holder-top {
			background-color: #e41f19;
			height: 100rpx;
			.filter-wrapper {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				justify-content: center;
				color: #FFF;
			}
		}
		.place-holder-bottom {
			position: relative;
			border-radius: 14rpx;
			background-color: #fff;
			margin-top: -30rpx;
			height: 40rpx;
		}
	}
	.total-amount {
		padding: 0 40rpx 40rpx;
		.price {
			font-size: 50rpx;
			font-weight: bold;
			color: #333;
		}
		.title {
			display: flex;
			.title-flag {
				width: 10rpx;
				border-top-right-radius: 6rpx;
				border-bottom-left-radius: 6rpx;
				background-color: #ec3e30;
			}
			.title-txt {
				padding-left: 14rpx;
				color: #555;
				font-size: 28rpx;
			}
		}
	}
	.placeholder {
		width: 100%;
		height: 20rpx;
		background-color: #F7F7F7;
	}
	.record-container {
		padding: 0 40rpx;
		.record-item {
			padding: 35rpx 0;
			display: flex;
			justify-content: space-between;
			.amount-wrapper, .right-wrapper {
				.title {
					color: #333;
					font-size: 28rpx;
					font-weight: 500;
					padding-bottom: 20rpx;
				}
				.middle-title {
					text-align: center;
				}
				.amount, .date {
					font-weight: 400;
					color: #777;
					text-align: center;
				}
			}
			.right-wrapper {
				display: flex;
				align-items: center;
				.status-wrapper {
					align-items: center;
					padding-left: 40rpx;
				}
			}
		}
	}
}
</style>
